<script setup lang="ts">
import {onMounted, ref} from 'vue'

const props = defineProps<{
  title?: string,
  avatar: string,
  name: string,
  stuNum: number
  teachingYear: number,
  score: number,
  action?: string
  actionIcon?: string
  click?: () => void
}>()

const value = ref(0)

onMounted(() => {
  value.value = props.score
})

</script>

<template>
  <div class="coach-card">
    <h1 class="title">{{ title }}</h1>
    <div class="content">
      <img :src="avatar" alt="">
      <div class="content-right">
        <p class="name">{{ name }}</p>
        <p class="info">学员{{ stuNum }} | 教龄{{ teachingYear }}年</p>
        <van-rate v-model="value" color="#ffd21e" void-color="#eee" readonly allow-half/>
      </div>
      <div class="action" v-if="action">
        <VanButton size="small" type="primary" plain :icon="actionIcon" @click="click">评论</VanButton>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.coach-card {

  padding: 14px;
  background-color: #FFF;
  border-radius: 12px;

  .title {
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    margin-bottom: 10px;
  }

  .content {
    display: flex;
    align-items: center;

    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }

    .content-right {
      margin-left: 20px;

      .name {
        font-size: 18px;
        font-weight: bold;
        line-height: 16px;
        margin-bottom: 10px;
      }

      .info {
        font-size: 14px;
        color: #999;
        line-height: 14px;
        margin-bottom: 10px;
      }
    }

    .action {
      margin-left: auto;
    }
  }
}
</style>
